import { nextTick } from 'vue'
import { storeToRefs } from 'pinia'
import { Local } from '@/utils/Storage'
import i18n from '@/language/index'
import { useThemeConfig } from '@/stores/modules/themeConfig'
import router from '@/router/index'
import { verifyUrl } from './ValidateUtil'
import _ from 'lodash'
/**
 * 全局组件大小
 * @returns 返回 `window.localStorage` 中读取的缓存值 `globalComponentSize`
 */
export const globalComponentSize = (): string => {
  const stores = useThemeConfig()
  const { themeConfig } = storeToRefs(stores)
  return (
    Local.get('themeConfig')?.globalComponentSize ||
    themeConfig.value?.globalComponentSize
  )
}
/**
 * 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
 * @param params 路由 query、params 中的 tagsViewName
 * @returns 返回当前 tagsViewName 名称
 */
export function setCustomTagsViewNameI18n(item: any) {
  let tagsViewName: string = ''
  const { query, params, meta } = item
  // 修复tagsViewName匹配到其他含下列单词的路由
  // https://gitee.com/lyt-top/vue-next-admin/pulls/44/files
  const pattern = /^\{("(zh-cn|en|zh-tw)":"[^,]+",?){1,3}}$/
  if (query?.tagsViewName || params?.tagsViewName) {
    if (
      pattern.test(query?.tagsViewName) ||
      pattern.test(params?.tagsViewName)
    ) {
      // 国际化
      const urlTagsParams =
        (query?.tagsViewName && JSON.parse(query?.tagsViewName)) ||
        (params?.tagsViewName && JSON.parse(params?.tagsViewName))
      tagsViewName = urlTagsParams[i18n.global.locale.value]
    } else {
      // 非国际化
      tagsViewName = query?.tagsViewName || params?.tagsViewName
    }
  } else {
    // 非自定义 tagsView 名称
    tagsViewName = i18n.global.t(meta.title)
  }
  return tagsViewName
}

/**
 * 设置浏览器标题国际化
 * @method const title = useTitle(); ==> title()
 */
export function useTitle() {
  const stores = useThemeConfig()
  const { themeConfig } = storeToRefs(stores)
  nextTick(() => {
    let webTitle = ''
    let globalTitle: string = themeConfig.value.globalTitle
    const { path, meta } = router.currentRoute.value
    if (path === '/login') {
      webTitle = <string>meta.title
    } else {
      webTitle = setCustomTagsViewNameI18n(router.currentRoute.value)
    }
    document.title = `${webTitle} - ${globalTitle}` || globalTitle
  })
}

/**
 * 打开外部链接
 * @param val 当前点击项菜单
 */
export function handleOpenLink(val: RouteItem) {
  const { origin, pathname } = window.location
  router.push(val.path)
  if (verifyUrl(<string>val.meta?.isLink)) window.open(val.meta?.isLink)
  else window.open(`${origin}${pathname}#${val.meta?.isLink}`)
}

//表单序列化
export const serialize = (data: any) => {
  let list: Array<String> = []
  Object.keys(data).forEach(ele => {
    list.push(`${ele}=${data[ele]}`)
  })
  return list.join('&')
}

/**
 * 对象深拷贝
 */
export const deepClone = (data: any) => {
  return _.cloneDeep(data)
}

/**
 * 获取url参数
 * @param name 参数名
 */
export const getQueryString = (name: string) => {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  let r = window.location.search.substr(1).match(reg)
  if (r != null) return unescape(decodeURI(r[2]))
  return null
}
